<template>
  <div class="index">
    <el-container>
      <!--侧边栏-->
      <el-aside width="200px" style="background-color: #545C69;">
        <div style="height: 60px;width: 200px; text-align: center;background-color: white;position: fixed">
          <img src="/imgs/logo2.png" alt="" style="height: 40px; margin-top: 9px">
        </div>
        <el-menu
            router
            :default-active="$router.currentRoute.path"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="top: 60px"
        >
          <el-menu-item v-for="item in menuList" :key="item.id" :index="item.html" v-if="item.subFunction.length === 0">
            <i :class="item.icon"/>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
          <el-submenu :key="item.id" :index="item.id.toString()" v-else>
            <template slot="title">
              <i :class="item.icon"/>
              <span>{{item.name}}</span>
            </template>
            <subItem :list="item.subFunction"></subItem>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-menu
              router
              :default-active="$router.currentRoute.path"
              class="el-menu-demo"
              mode="horizontal"
              text-color="#000000"
              active-text-color="#187fdd"
              style="float: right;">
            <el-submenu>
              <template slot="title">
                <el-avatar :size="35" :src="circleUrl"></el-avatar>
                <span> {{user.username}}</span>
              </template>
              <el-menu-item @click="logout()">
                退出登录
              </el-menu-item>
            </el-submenu>
            <!--          <el-menu-item index="/personManage/UserList"><a target="_blank">员工管理</a></el-menu-item>-->
          </el-menu>
        </el-header>
        <el-main>
          <!-- 根据路由，由其它视图组件来显示 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import subItem from '@/components/subItem.vue'

export default {
  name: 'HomeView',
  data(){
    return{
      menuList:[],
      user:{
        id:'',
        username:'',
        limitName:''
      },
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    }
  },

  components: {
    subItem
  },
  methods: {
    loadFunction(){
      this.axios.get("http://localhost:8080/function/getFunction").then((response) => {
        this.menuList = response.data.data;
      })
    },
    logout(){
      if(confirm("您确认退出登录吗？")){
        localStorage.removeItem("jwt");
        location.href="/user/login";//返回登录页面
      }
    }
  },
  mounted() {
    this.loadFunction();
  },
  created:function (){
    if (localStorage.getItem('jwt') == null){
      location.href="http://localhost:8081/user/login";
    }
    let token=localStorage.getItem('jwt').split(".");
    console.log(token);
    let str=token[1];
    let user=JSON.parse(decodeURIComponent(escape(window.atob(str))));
    console.log(user.username);
    this.user.username = user.username
  }
}
</script>

<style>
body{
  margin: 0;
}
.el-header{
  padding: 0 !important;
  display: inline;
  border-bottom: solid 1px #e6e6e6;
}
.el-aside>.el-menu{
  position: fixed;
  height: 100%;
  width: 200px;
}
.el-card__body, .el-main{
  padding: 0;
}
img{
  display: inline-block;
  border: none;
  vertical-align: middle;
}
.el-menu-item *{
  text-decoration: none;
}
</style>
